<template>  
    <view class="container">  
		
		<view class="user-section">
			<view class="bg">
			</view>
			<view style="height: 200upx;width: 690upx;color: #fff;">
				<view style="position: absolute;top: 50upx;" @click="jump" data-src="/pageA/member/info/info">
					<image style="width: 150upx;height: 150upx;border: 2px solid #fff;border-radius: 50%;" :src="res.avatar||'/static/missing-face.png'"></image>		
				</view>
				<view style="position: absolute;top: 85upx;left: 200upx;">
					<view>
						ID:{{res.id||'当前用户无id'}}
					</view>
					<view>
						{{res.x_levelname}} / {{res.z_levelname}}
					</view>
				</view>
					<view style="margin-left: 220upx;display: flex;position: absolute;right: 40upx;top: 80upx;">
						<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="../commission/all">
							<image style="width: 50upx;height:50upx;" src="../../static/message.png" mode=""></image>
							<text style="font-size: 20upx;">提现</text>
						</view>
						<view @click="navTo('/pages/commission/qrcode/qrcode')" style="display: flex;flex-direction: column;margin-left: 20upx;text-align: center;">
							<image style="width: 50upx;height: 50upx;" src="../../static/set.png" mode=""></image>
							<text style="font-size: 20upx;">设置</text>
						</view>
						
					</view>
				</view>
			<view class="tj-sction" style="display: flex;flex-direction: column;position: absolute;width: 690upx;">
				<view class="" style="padding:10upx 30upx 0upx 30upx;margin-bottom: -20upx;">
					<view class="">
						<!-- <text>当前级别:</text>
						<text style="font-weight: bold;font-size: 34upx;margin: 0upx 15upx;">{{res.level_name}}</text> -->
						<!-- <text class="yticon icon-iLinkapp-" style="margin: 0upx 15upx;color: #D6A22D;"></text> -->
						<!-- <image style="width: 50upx;height: 50upx;margin: 0upx 20upx -10upx 20upx;" src="../../static/huangguan.png" mode=""></image> -->
						<!-- <text style="color: #7A5B13;">升级代理</text> -->
					</view>
					<view>
						<text style="color: #ADADAD;font-size: 22upx;">赶快邀请身边的小伙伴来注册吧!~~</text>
						 <!-- <progress :percent="percent1" activeColor='#8F8F8F' stroke-width='1' show-info /> -->
					</view>
				</view>
				<view style="display: flex;justify-content: space-around;">
				<view class="tj-item">
					<text style="color: #000;">余额 : 
					<text class="num" style="color: #05052B;font-weight: 550;padding-left: 6upx;" v-if="res.credit2">{{res.credit2}}</text></text>
				</view>
				<view class="tj-item" @click="navTo('/pageA/member/shopy/shopy')">
					<text style="color: #000;">预收益 : 
					<text class="num" style="font-weight: 550;padding-left: 6upx;" v-if="res.yushouyi">{{res.yushouyi}}</text></text>
				</view>
				<view class="tj-item" @click="navTo('/pageA/member/details/bz')">
					<text style="color: #000;">业绩 : 
					<text class="num" style="font-weight: 550;padding-left: 6upx;" v-if="res.sxnum">{{res.sxnum}}</text></text>
				</view>
				<view class="tj-item" @click="navTo('/pageA/member/shopy/fuxiao')">
					<text style="color: #000;">复销 : 
					<text class="num" style="font-weight: 550;padding-left: 6upx;" v-if="res.fuxiao1">{{res.fuxiao1}}</text></text>
				</view>
				<!-- <view class="tj-item">
					<text style="color: #000;">积分 : 
					<text class="num" style="font-weight: 550;padding-left: 6upx;" v-if="res.credit1">{{res.credit1}}</text></text>
				</view>
				<view class="tj-item" @click="jump" data-src="../../pageA/member/details/bz">
					<text style="color: #000;">业绩 : 
					<text class="num" style="font-weight: 550;padding-left: 6upx;" v-if="res.x_yeji">{{res.x_yeji}}</text></text>
				</view> -->
				</view>
			</view>
		</view>
		
		<view 	class="cover-container">
			<!-- <image class="arc" src="/static/arc.png"></image> -->
			
			
			<!-- 订单 -->
			<view class="order-section" style="display: flex;justify-content: space-between;margin-bottom: -40upx;padding:20upx;height: 100upx;margin-top: 225upx;">
				<view class=""  style="font-size: 40upx;font-weight: 550;">
					我的订单
				</view>
				<view style="font-size: 24upx;color: #908F8D;font-weight: 550;line-height: 70upx;" @click="navTo('/pages/order/order?index=0')" hover-class="common-hover"  :hover-stay-time="50">
					全部 >
				</view>
			</view>
			<view class="order-section" style="color:#000">
				<!-- <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouye"></text>
					<text>全部订单</text>
				</view> -->
				<view class="order-item" @click="navTo('/pages/order/order?index=1')"  hover-class="common-hover" :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifukuan.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=2')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daifahuo.png" mode=""></image>
					<text>待发货</text>
				</view>
				
				<view class="order-item" @click="navTo('/pages/order/order?index=3')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daishouhuo.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=4')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/daipingjia.png" mode=""></image>
					<text>已完成</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?index=5')" hover-class="common-hover"  :hover-stay-time="50">
					<image style="display: block; width: 80upx;height: 120upx;" src="../../static/shouhou.png" mode=""></image>
					<text>已取消</text>
				</view>
			</view>
			
			<view class="user">
					<!-- 用户功能 -->
					<view class="com-item">
						<view class="com-wrap">
							<block v-for="(item, index) in userList" :key="index">
								<view class="cell" @click="jump" :data-src="item.path" v-if="item.show">
									<view class="cell-left">
										<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
										<view class="cell-text">{{ item.title }}</view>
									</view>
									<uni-icons type="arrowright" size="14"></uni-icons>
								</view>
							</block>
						</view>
					</view>
			
					<!-- 用户服务 -->
					<view class="com-item">
						<view class="com-wrap">
							<view class="cell" @click="jump" :data-src="item.path" v-for="(item, index) in serverList" :key="index">
								<view class="cell-left">
									<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
									<view class="cell-text">{{ item.title }}</view>
								</view>
								<uni-icons type="arrowright" size="14"></uni-icons>
							</view>
						</view>
					</view>
				</view>
		</view>
    </view>  
</template>

<script>
	import uniIcons from '@/components/uni-icon/uni-icon.vue';
	export default {
		components: {
			uniIcons
		},
		data(){
			return {
				user_id:'',
				token:'',
				timestamp:'',
				res:[],
				percent1:0,
				percent:'',
				integration:'',
				level_name:'',
				real_head_img:'',
				real_name:'',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				openid:"",
				userList: [
					{
						title: '原点升级',
						icon: '../../static/upgrade.png',
						show: true,
						path: '/pageA/member/upgrade'
					},
					{
						title: '复消',
						icon: '../../static/upgrade.png',
						show: false,
						path: ''
					},
					{
						title: '我的足迹',
						icon: '../../static/guanzhuw.png',
						show: true,
						path: '/pageA/member/history'
					},
					{
						title: '地址管理',
						icon: '../../static/menu1.png',
						show: true,
						path: '/pageA/member/address/address'
					},
					{
						title: '专属海报',
						icon: '../../static/menu_six.png',
						show: true,
						path: '/pages/commission/qrcode/invite_code'
					},
					{
						title: '我的社区',
						icon: '../../static/menu_three.png',
						show: true,
						path: '/pageA/member/myterritory'
					},
				],
				serverList: [
					{
						title: '会员资料',
						icon: '../../static/huiyuanziliao.png',
						show: true,
						path: '/pageA/member/info/info'
					},
					{
						title: '新闻资讯',
						icon: '../../static/003.png',
						show: true,
						path: '/pages/media/media?k=12&m=0'
					},
					{
						title: '我的钱包',
						icon: '../../static/menu5.png',
						show: true,
						path: '/pages/commission/all'
					},
					{
						title: '手机号',
						icon: '../../static/004.png',
						show: true,
						path: '/pageA/member/bind/bind'
					}
				],
			}
		},
		onShow:function(){
		   uni.getStorage({
		    key: 'openid',
		    success: (res) => {
		     this.openid = res.data
		     this.setajax()
		    },
		    fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
		    }
		   });
		 },
		methods: {
			setajax(){
				uni.request({
					url: 'http://adkk.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data: {'openid':this.openid},
					success: res => {
						this.res = res.data
						
						var userList = this.userList.filter(function (element, index, self) {
						    return (element.title == '复消')
						})
						if (res.data.fuxiao == 1) {
							userList[0].path = '/pages/order/create/create?id='+ res.data.goodid + '&optionid=0&total=1&fuxiao=1'
							userList[0].show = true
						}
						
						uni.setStorage({
							key: 'pid_father',
							data: res.data.id
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},
			navTo(url){
				uni.navigateTo({  
					url
				})  
			},
			jump(e){
				if(e.currentTarget.dataset.src=='no'){
					this.jumpno()
				}
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			jumpno() {
				uni.showModal({
				title:'提示',
				content:'功能即将开放',
				showCancel: false,
				confirmColor:"#05052B",
					success() {
						return
					}
				})
			},
			
			
    }  
	}
</script>
<style lang='scss'>
	button::after {
		border: none;
	}
	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height:inherit;
	}
	button {
		border-radius:0;
	}
	
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}

	.user-section{
		height: 300upx;
		padding: 60upx 30upx 0upx 30upx;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			background-color: #05052B;
			/* opacity: .7; */
		}
	}
	.user-info-box{
		color: #fff;
		height: 170upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		/* padding-top: 50upx; */
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			width: 300upx;
			/* color: $font-color-dark; */
			margin-left: 20upx;
		}
		.userid {
			margin-left: 20upx;
		}
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: 12upx;
			color: #ADADAD;
			margin-top: 20upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -180upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			/* flex-direction: column; */
			height: 90upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.order-section{
		@extend %section;
		padding: 0upx 0upx 20upx 0upx;
		/* margin-top: 20upx; */
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 100upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			line-height: 1.2;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 30upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			/* align-items: center; */
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.yticon{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	.user {
		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50vw;
			padding: 30rpx;
			z-index: 9;
			border-radius: 0 0 20% 20%;
			background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
			background-size: cover;
			.setting {
				color: #fff;
				position: absolute;
				top: 60rpx;
				left: 60rpx;
				font-size: 50rpx;
			}
			.info {
				position: absolute;
				text-align: center;
				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
				.nickname {
					color: #fff;
					font-size: 28rpx;
				}
			}
		}
		.order-status {
			padding: 0 20rpx;
			margin-top: -10vw;
			.status-wrap {
				border-radius: 25rpx;
				overflow: hidden;
				.status-list {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background: #fff;
					padding-top: 30rpx;
					padding-bottom: 30rpx;
					.status-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.item-icon {
							line-height: 1;
							font-size: 65rpx;
							color: #bbb;
						}
						.item-text {
							font-size: 28rpx;
							color: #666;
							margin-top: 5rpx;
						}
					}
				}
			}
		}
		.com-item {
			// padding-left: 20rpx;
			// padding-right: 20rpx;
			margin-top: 20rpx;
			.com-wrap {
				border-radius: 25rpx;
				overflow: hidden;
			}
		}
		.cell {
			height: 80rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1px solid #f8f8f8;
			&:active {
				background: #f2f2f2;
			}
			&:last-child {
				border-bottom: none !important;
			}
			.cell-left {
				display: flex;
				align-items: center;
				.cell-icon {
					width: 40rpx;
					height: 40rpx;
				}
				.cell-text {
					color: #000;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			.iconfont {
				font-size: 40rpx;
				color: #999;
			}
		}
	}
	.btn-hover {
		background: #f2f2f2 !important;
	}
</style>